<template>
  <div>
    <div class="out-box">
      <el-button @click="isPartsDialog = true">点我</el-button>
      <el-dialog
        custom-class="main-maint-custom"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="设置随机配件"
        :visible.sync="isPartsDialog"
        width="70%"
        :before-close="handlePartsClose"
      >
        <div class="main-maint edit-main">
          <div
            style="max-height: calc(80vh - 130px); overflow-y: auto"
            class="abmain-maint-tle padd-bt15 f1"
          >
            <el-form :model="formTable" ref="ruleFormTable">
              <el-table
                :header-cell-style="{ 'background-color': '#f8f9fa' }"
                :data="formTable.partsTableData"
                style="width: 100%"
              >
                <el-table-column label="配件名称">
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="`partsTableData[${scope.$index}].data1`"
                      :rules="rulesTable.data1"
                    >
                      <el-input
                        @blur="
                          validateField(`partsTableData[${scope.$index}].data1`)
                        "
                        clearable
                        v-model="scope.row.data1"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="型号">
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="`partsTableData[${scope.$index}].data2`"
                      :rules="rulesTable.data2"
                    >
                      <el-input clearable v-model="scope.row.data2"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="数量">
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="`partsTableData[${scope.$index}].data3`"
                      :rules="rulesTable.data3"
                    >
                      <el-input clearable v-model="scope.row.data3"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="备注">
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="`partsTableData[${scope.$index}].data4`"
                      :rules="rulesTable.data4"
                    >
                      <el-input clearable v-model="scope.row.data4"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>

                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      @click="handleDelParts(scope.$index)"
                      type="text"
                      size="small"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
          </div>
          <div
            slot="footer"
            style="
              height: 130px;
              padding-top: 15px;
              box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
              background: #fff;
              box-sizing: border-box;
              margin: 0 -15px;
            "
          >
            <div class="padd-lt">
              <el-button class="maint-btn" size="mini" @click="handleAddParts"
                >+添加维保计划</el-button
              >
            </div>
            <div class="modal-footer flex" style="margin: 15px 0 0 0">
              <el-button size="mini" @click="handlePartsClose">取消</el-button>
              <el-button size="mini" @click="handlePartsSubmit" type="primary"
                >确认</el-button
              >
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 设备接受列表
      equipReceiptList: [
        {
          receiptNo: "JS201805220005",
          equipmentId: "佳能多功能数码复合机-2204AD",
          totalQty: 1,
          checkDate: "2018-05-22 00:00:00",
          status: "完成验收",
          operation: { view: true, edit: true },
        },
        {
          receiptNo: "JS201405310010",
          equipmentId: "排泥池",
          totalQty: 301,
          checkDate: "2014-05-31 00:00:00",
          status: "完成验收",
          operation: { view: true, edit: true },
        },
        // 其余数据项按此格式补充
      ],

      isPartsDialog: false,
      partsTableData: [
        {
          data1: "清洗",
          data2: "11",
          data3: "1",
          data4: "",
        },
        {
          data1: "清洗",
          data2: "11",
          data3: "",
          data4: "",
        },
      ],
      formTable: { partsTableData: [] },
      rulesTable: {
        data1: [
          {
            required: true,
            validator: this.validateMaintenanceType,
            trigger: ["blur", "change"],
          },
        ],
        data2: [
          {
            required: true,
            validator: this.validateMaintenanceValue,
            trigger: ["blur", "change"],
          },
        ],
        data3: [
          {
            required: true,
            validator: this.validateMaintenancePeriod,
            trigger: ["blur", "change"],
          },
        ],
        data4: [
          {
            required: true,
            validator: this.validateMaintenancePeriod,
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    // 验证器函数移到 methods 中
    validateMaintenanceType(rule, value, callback) {
      console.log("验证维保类型:", value);
      if (!value) {
        return callback(new Error("维保类型不能为空"));
      }
      // if (value.length < 2 || value.length > 20) {
      //   return callback(new Error('维保类型长度在 2 到 20 个字符'));
      // }
      callback();
    },
    // 验证器函数移到 methods 中
    validateMaintenanceValue(rule, value, callback) {
      if (!value) {
        return callback(new Error("数值不能为空"));
      }
      // if (value.length < 2 || value.length > 20) {
      //   return callback(new Error('维保类型长度在 2 到 20 个字符'));
      // }
      callback();
    },
    // 验证器函数移到 methods 中
    validateMaintenancePeriod(rule, value, callback) {
      if (!value) {
        return callback(new Error("周期不能为空"));
      }
      // if (value.length < 2 || value.length > 20) {
      //   return callback(new Error('维保类型长度在 2 到 20 个字符'));
      // }
      callback();
    },
    handlePartsClose() {
      this.isPartsDialog = false;
    },
    handlePartsSubmit(e) {
      this.ruleFormTable = this.$refs.ruleFormTable;
      this.ruleFormTable.validate((valid) => {
        if (valid) {
          this.isPartsDialog = false;
        } else {
          console.log("验证失败");
          return false;
        }
      });
    },

    handleDelParts(e) {
      console.log("handleDelMaint-e", e);
      this.formTable.partsTableData.splice(e, 1);
    },
    validateField() {},
    handleAddParts() {
      this.$nextTick(() => {
        const container = document.querySelector(".abmain-maint-tle");
        if (container) {
          container.scrollTo(0, 99999);
        }
      });
      this.ruleFormTable = this.$refs.ruleFormTable;
      this.ruleFormTable.validate((valid) => {
        if (valid) {
          this.formTable.partsTableData.push({
            data1: "",
            data2: "",
            data3: "",
            data4: "",
          });
          console.log("提交表单");
        } else {
          console.log("验证失败");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.out-box {
  border: 1px solid red;
  height: 100%;
  width: 100%;
}
// dialog 维保
::v-deep .main-maint-custom {
  margin-top: 20vh !important;
}
.edit-main {
  padding: 15px 15px 0;
  box-sizing: border-box;
  .edit-tit {
    border-left: 4px solid #1a4b8c;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }
  .basic-info {
    border: 1px solid #ebeef5;
  }
}
.maintenance-section {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.maintenance-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.maintenance-text {
  font-size: 16px;
}

.maintenance-btn {
  background: #1a4b8c;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s;
}

.maintenance-btn:hover {
  background: #1a4b8c;
}
/* 新增：维保计划展示区域 */
.maintenance-plan {
  margin-top: 20px;
  padding: 15px;
  background: white;
  border: 1px solid #eaeaea;
  border-radius: 6px;
}

.plan-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.plan-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

.plan-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #1a4b8c;
}

.plan-info {
  display: flex;
  flex-direction: column;
}

.plan-type {
  font-weight: bold;
  font-size: 14px;
  color: #333;
}

.plan-cycle {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.plan-actions {
  display: flex;
  gap: 10px;
}

.edit-plan,
.delete-plan {
  background: none;
  border: none;
  color: #1a4b8c;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.edit-plan:hover,
.delete-plan:hover {
  background: rgba(44, 128, 255, 0.1);
}

.empty-plan {
  text-align: center;
  color: #999;
  padding: 30px;
  font-style: italic;
}
.maint-btn {
  background: none;
  border: 1px dashed #1a4b8c;
  color: #1a4b8c;
  cursor: pointer;
  font-size: 14px;
  padding: 8px 15px;
  border-radius: 4px;
  margin-top: 10px;
  transition: background 0.2s;
}

.abmain-maint-tle {
  overflow-y: auto;
  box-sizing: border-box;
}
.modal-footer {
  padding: 15px 20px;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #eaeaea;
  margin: 0 -15px;
  box-sizing: border-box;
}
// 共同
::v-deep .el-dialog {
  position: fixed !important;
  margin: 0 !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>